<template>
	<div class="goods">
		<div style="display: flex; justify-content: space-between" v-if="root">
			<el-button size="mini" type="primary" plain @click="add">
				新增档案
			</el-button>
			<div>
				<el-input style="width: 250px" v-model="formData.nickName" clearable size="mini"
					placeholder="根据姓名,手机号,身份证进行搜索" @change="getTableData">
				</el-input>
				<el-select v-model="formData.status" placeholder="请选择" size="mini"
					@change="getTableData" clearable style="width: 100px;">
					<el-option label="待审核" :value="0"></el-option>
					<el-option label="已通过" :value="1"></el-option>
					<el-option label="未通过" :value="2"></el-option>
				</el-select>
				<el-button @click="reset" size="mini" v-debounce>
					重置
				</el-button>
			</div>
		</div>
		<div class="goods-table">
			<el-table :data="tableData" v-loading="loading" border stripe 
				style="width: 100%" height="100%">
				<el-table-column prop="i" label="序号" fixed="left" width="50">
				</el-table-column>
				<el-table-column prop="employeeName" label="姓名" width="80">
				</el-table-column>
				<el-table-column prop="employeeSex" label="性别" width="50">
					<template slot-scope="scope">
						<span v-if="scope.row.employeeSex == 0">男</span>
						<span v-if="scope.row.employeeSex == 1">女</span>
					</template>
				</el-table-column>
				<el-table-column prop="employeeBirthday" label="出生日期" width="100">
				</el-table-column>
				<el-table-column prop="employeeAge" label="年龄" width="50">
				</el-table-column>
				<el-table-column prop="employeeIdcard" label="身份证" width="180">
				</el-table-column>
				<el-table-column prop="employeeEmail" label="手机号" width="120">
				</el-table-column>
				<el-table-column prop="employeeEntryDate" label="入职日期" width="100">
				</el-table-column>
				<el-table-column prop="employeeLeaveDate" label="离职日期"  width="100">
				</el-table-column>
				<el-table-column label="合同图片" width="120">
					<template slot-scope="scope">
						<el-image :src="READ_IMG_URL+scope.row.contractUrl[0]"
							style="width: 90px; height: 90px;"
							:preview-src-list="addUrl(scope.row.contractUrl)"
							v-if="scope.row.contractUrl != null">
						</el-image>
						<span v-else>暂无图片</span>
					</template>
				</el-table-column>
				<el-table-column label="保密协议图片" width="120">
					<template slot-scope="scope">
						<el-image :src="READ_IMG_URL+scope.row.secrecyUrl[0]"
							style="width: 90px; height: 90px;"
							:preview-src-list="addUrl(scope.row.secrecyUrl)"
							v-if="scope.row.secrecyUrl != null">
						</el-image>
						<span v-else>暂无图片</span>
					</template>
				</el-table-column>
				<el-table-column prop="employeeContractDate" label="合同到期日期" width="120">
				</el-table-column>
				<el-table-column prop="employeeUpdateCount" label="修改次数" width="60">
				</el-table-column>
				<el-table-column prop="employeeStatus" label="在职状态" width="80">
					<template slot-scope="scope">
						<el-tag size="medium" type="success" v-if="scope.row.employeeStatus == 1">
							在职
						</el-tag>
						<el-tag size="medium" type="danger" v-if="scope.row.employeeStatus == 0">
							离职
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="employeeUpdateStatus" label="修改状态" width="80">
					<template slot-scope="scope">
						<el-tag size="medium" type="warning" 
							v-if="scope.row.employeeUpdateStatus == 0">
							待审核
						</el-tag>
						<el-tag size="medium" type="success" 
							v-if="scope.row.employeeUpdateStatus == 1">
							已通过
						</el-tag>
						<el-tag size="medium" type="danger"
							v-if="scope.row.employeeUpdateStatus == 2">
							未通过
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="employeeRemark" label="备注" width="120">
				</el-table-column>
				<el-table-column prop="userId" label="操作" width="160" fixed="right">
					<template slot-scope="scope">
						<el-button type="text" @click="examineDialog(scope.row)"
							:disabled="examineDisabled(scope.row)" v-debounce>
							审核
						</el-button>
						<el-divider direction="vertical"></el-divider>
						<el-button type="text" @click="detailsProfile(scope.row.id)">
							详情
						</el-button>
						<el-divider direction="vertical"></el-divider>
						<el-button type="text" @click="deleteProfile(scope.row.id)"
							:disabled="!root" v-debounce>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background :current-page="formData.currentPage" :total="formData.total"
				:page-size="formData.pageSize" :page-sizes="[20, 50, 100]"
				@size-change="handleSizeChange" @current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper" >
			</el-pagination>
		</div>
		<!-- 审核档案 -->
		<el-dialog style="margin-top:0" :visible.sync="examineDialogShow" width="70%" 
			title="审核档案" @close="closeDialog">
			<div style="width: 100%;display: block;">
				<div class="select-item">
					<label class="select-item-title-label">职工姓名</label>
					<el-input type="text" :value="selectProfileCache.employeeName"
						placeholder="职工姓名" readonly>
					</el-input>
					<label class="select-item-label">
						原：{{selectProfile.employeeName}}
					</label>
				</div>
				<div class="select-item">
					<label class="select-item-title-label">职工状态</label>
					<el-input type="text" :value="employeeStatus(selectProfileCache.employeeStatus)"
						placeholder="职工状态" readonly>
					</el-input>
					<label class="select-item-label">
						原：{{employeeStatus(selectProfile.employeeStatus)}}
					</label>
				</div>
				<div class="select-item">
					<label class="select-item-title-label">性别</label>
					<el-input type="text" :value="employeeSex(selectProfileCache.employeeSex)"
						placeholder="性别" readonly>
					</el-input>
					<label class="select-item-label">
						原：{{employeeSex(selectProfile.employeeSex)}}
					</label>
				</div>
				<div class="select-item">
					<label class="select-item-title-label">年龄</label>
					<el-input type="text" :value="selectProfileCache.employeeAge"
						placeholder="年龄" readonly>
					</el-input>
					<label class="select-item-label">
						原：{{selectProfile.employeeAge}}
					</label>
				</div>
				<div class="select-item">
					<label class="select-item-title-label">手机号码</label>
					<el-input type="text" :value="selectProfileCache.employeeEmail"
						placeholder="手机号码" readonly>
					</el-input>
					<label class="select-item-label">
						原：{{selectProfile.employeeEmail}}
					</label>
				</div>
				<div class="select-item">
					<label class="select-item-title-label">身份证号</label>
					<el-input type="text" :value="selectProfileCache.employeeIdcard"
						placeholder="身份证号" readonly>
					</el-input>
					<label class="select-item-label">
						原：{{selectProfile.employeeIdcard}}
					</label>
				</div>
				<div class="select-item">
					<label class="select-item-title-label">出生日期</label>
					<el-input type="text" :value="selectProfileCache.employeeBirthday"
						placeholder="出生日期" readonly>
					</el-input>
					<label class="select-item-label">
						原：{{selectProfile.employeeBirthday}}
					</label>
				</div>
				<div class="select-item">
					<label class="select-item-title-label">入职日期</label>
					<el-input type="text" :value="selectProfileCache.employeeEntryDate"
						placeholder="入职日期" readonly>
					</el-input>
					<label class="select-item-label">
						原：{{selectProfile.employeeEntryDate}}
					</label>
				</div>
				<div class="select-item">
					<label class="select-item-title-label">离职日期</label>
					<el-input type="text" :value="selectProfileCache.employeeLeaveDate"
						placeholder="离职日期" readonly>
					</el-input>
					<label class="select-item-label">
						原：{{selectProfile.employeeLeaveDate}}
					</label>
				</div>
				<div class="select-item">
					<label class="select-item-title-label">合同到期日期</label>
					<el-input type="text" :value="selectProfileCache.employeeContractDate"
						placeholder="合同到期日期" readonly>
					</el-input>
					<label class="select-item-label">
						原：{{selectProfile.employeeContractDate}}
					</label>
				</div>
				<div class="select-item">
					<label class="select-item-title-label">备注</label>
					<el-input type="textarea" :rows="4" placeholder="备注"
						:value="selectProfileCache.employeeRemark" readonly>
					</el-input>
				</div>
				<div class="select-item">
					<label class="select-item-title-label">合同图片</label>
					<div style="display: flex;">
						<el-image v-for="(item,index) in selectProfileCache.contractUrl" 
							:key="index" :src="READ_IMG_URL+item" 
							style="width: 90px;height: 90px;margin-right: 10px;"
							:preview-src-list="addUrl(selectProfileCache.contractUrl)">
						</el-image>
					</div>
				</div>
				<div class="select-item">
					<label class="select-item-title-label">保密协议图片</label>
					<div style="display: flex;">
						<el-image v-for="(item,index) in selectProfileCache.secrecyUrl" 
							:key="index" :src="READ_IMG_URL+item" 
							style="width: 90px;height: 90px;margin-right: 10px;"
							:preview-src-list="addUrl(selectProfileCache.secrecyUrl)">
						</el-image>
					</div>
				</div>
			</div>
			<div slot="footer">
					<el-button type="danger" @click="examine(2)" v-debounce>驳回</el-button>
				    <el-button type="success" @click="examine(1)" v-debounce>通过</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import profileApi from '../../api/employeeProfile.js';
	import config from '../../api/apiURL.js';
	export default {
		data() {
			return {
				READ_IMG_URL: config.READ_IMG_URL,
				userInfo: {},
				root: false,
				loading: false,
				tableData: [],
				formData: {
					id: null,
					userId: null,
					nickName: null,
					status: null,
					currentPage: 1,
					pageSize: 50,
					total: 0
				},
				selectProfile: {},
				selectProfileCache: {},
				examineDialogShow: false,
				
			};
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
			if (this.userInfo.roleId == 1) {
				this.root = true;
			}
			this.getTableData();
		},
		//超级管理员显示功能
		methods: {
			// 获取表格数据
			getTableData(){
				this.loading = true;
				profileApi.getEmployeeProfileList(this.formData).then(res =>{
					if (res.code === 200){
						this.formData.total = res.data.total;
						this.tableData = res.data.profileVoList.map((item,index) =>{
							item.i = (this.formData.currentPage - 1) * this.formData.pageSize + index + 1;
							return item;
						});
					}
				}).finally(() =>{
					this.loading = false;
				})
			},
			// pageSize变化
			handleSizeChange(pageSize) {
				this.formData.pageSize = pageSize
				this.getTableData()
			},
			// 页码变化
			handleCurrentChange(curPage) {
				this.formData.currentPage = curPage
				this.getTableData()
			},
			reset(){
				this.formData.nickName = null
				this.formData.status = null
				this.formData.currentPage = 1
				this.getTableData();
			},
			addUrl(list){
				let newList = []
				list.forEach(item =>{
					newList.push(config.READ_IMG_URL+item);
				})
				return newList;
			},
			// 添加
			add(){
				this.$router.push({
					path: "/goods/addProfile"
				})
			},
			// 详情
			detailsProfile(id){
				localStorage.setItem("profileId", id);
				this.$router.push({
					path: "/goods/addProfile"
				})
			},
			// 删除
			deleteProfile(id){
				this.$confirm("确定要删除该档案？","提示",{
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() =>{
					const data = {
						id: id
					}
					const loading = this.$loading({
						lock: true,
						text: 'Loading...',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					profileApi.deleteEmployeeProfile(data).then(res =>{
						if (res.code == 200){
							this.$message.success("删除成功");
							this.getTableData();
						}
					}).finally(() =>{
						loading.close();
					})
				}).catch(() =>{
					
				})
			},
			// 打开审核弹窗
			examineDisabled(row){
				if (this.root){
					if (row.employeeUpdateStatus == 0){
						return false;
					}
				}
				return true;
			},
			examineDialog(row){
				const loading = this.$loading({
					lock: true,
					text: 'Loading...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.selectProfile = row;
				const data = {
					userId: row.userId
				}
				profileApi.getEmployeeProfileCache(data).then(res =>{
					if (res.code == 200){
						this.selectProfileCache = res.data
						this.examineDialogShow = true;
					}
				}).finally(() =>{
					loading.close();
				})
			},
			closeDialog(){
				this.selectProfile = {},
				this.selectProfileCache = {},
				this.examineDialogShow = false;
			},
			employeeStatus(status){
				if (status == 0){
					return "离职"
				}
				return "在职"
			},
			employeeSex(sex){
				if (sex == 0){
					return "男"
				}
				return "女"
			},
			// 审核
			examine(index){
				let msg = "确定要通过吗？"
				if (index == 2){
					msg = "确定要驳回吗？"
				}
				this.$confirm(msg,"提示",{
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() =>{
					console.log("用户点击确定")
					const data = {
						id: this.selectProfile.id,
						cacheId: this.selectProfileCache.id,
						status: index
					}
					const loading = this.$loading({
						lock: true,
						text: 'Loading...',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					profileApi.examineProfile(data).then(res =>{
						if (res.code == 200){
							this.closeDialog();
							this.getTableData();
							this.$message.success("操作成功")
						}
					}).finally(() =>{
						loading.close();
					})
				}).catch(() =>{
					console.log("用户点击取消")
				})
			}
		},
	};
</script>

<style scoped>
	.page {
		text-align: center;
	}

	.goods {
		height: 100%;
	}

	.goods-table {
		height: 94%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		margin-top: 10px;
	}

	.imgUrl {
		width: 100px;
		height: 100px;
		object-fit: cover;
		/* 保持原始宽高比，填充容器 */
	}

	.htimg {
		width: 150px;
		height: 150px;
		object-fit: cover;
		/* 保持原始宽高比，填充容器 */
	}
	
	.select-item{
		width: 450px;
		margin-right: 20px;
		margin-bottom: 20px;
		display: inline-block;
		vertical-align: top
	}
	
	.select-item-title-label{
		font-size: 14px;
		line-height: 40px;
		padding-bottom: 10px;
		color: #606266;
		display: inline-block;
	}
	
	.select-item-label{
		font-size: 13px;
		color: #909399;
		display: inline-block;
	}
</style>